<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="detailRegister"
    @close="drawerReset"
    :closable="false"
    :showOkBtn="false"
    cancelText="关闭"
    :title="drawerInfo.record.name"
    showFooter
    isDetail
  >
    <div class="box-drawer">
      <div class="drawer-header">
        <div class="header-detail">
          <div class="detail-item">
            <div class="item-name">负载名称</div>
            <div class="item-value">{{ drawerInfo.record.name }}</div>
          </div>
          <div class="detail-item">
            <div class="item-name">命名空间</div>
            <div class="item-value">{{ drawerInfo.record.namespace }}</div>
          </div>
        </div>
        <div class="header-detail">
          <div class="detail-item">
            <div class="item-name">状态</div>
            <div class="item-value global-active-status" v-if="drawerInfo.record.status === 'True'">运行中</div>
            <div class="item-value global-stop-status" v-else-if="drawerInfo.record.status === 'False'">未就绪</div>
          </div>
          <div class="detail-item">
            <div class="item-name">创建时间</div>
            <div class="item-value">{{ drawerInfo.record.creationTimestamp }}</div>
          </div>
        </div>
        <div class="header-detail">
          <div class="detail-item">
            <div class="item-name">实例个数</div>
            <div class="item-value">{{ drawerInfo.record.replicas }}</div>
          </div>
          <div class="detail-item">
            <div class="item-name">端口号</div>
            <div class="item-value">{{ drawerInfo.record.port }}</div>
          </div>
        </div>
        <div class="header-detail">
          <div class="detail-item">
            <div class="item-name">运行环境</div>
            <div class="item-value global-stop-status" v-if="drawerInfo.record.nameType === 0">灰度</div>
            <div class="item-value global-active-status" v-else-if="drawerInfo.record.nameType === 1">生产</div>
          </div>
        </div>
      </div>
      <div class="search-input">
        <a-input-search
          v-model:value.trim="drawerInfo.search"
          placeholder="请输入实例名称"
          style="width: 260px"
          allowClear
          enter-button
          @search="onSearch"
        />
        <a-button type="primary" style="margin-left: 4px" @click="reload">
          <template #icon>
            <reload-outlined />
          </template>
        </a-button>
      </div>
      <BasicTable @register="registerTable">
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.dataIndex === 'status'">
            <span class="global-active-status" v-if="record.status === 'True'">运行中</span>
            <span class="global-stop-status" v-else-if="record.status === 'False'">未就绪</span>
          </template>
          <template v-else-if="column.dataIndex === 'namespace'">
            <EllipsisTooltip :title="record.namespace" :width="160">
              <a-tag color="success" class="global-border-radius">{{ record.namespace }}</a-tag>
            </EllipsisTooltip>
          </template>
        </template>
      </BasicTable>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, createVNode } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { BasicTable, useTable } from '@/components/Table'
import EllipsisTooltip from '@/components/EllipsisTooltip/index.vue'
import { getDetailBasicColumns } from '../dataSource'
import { cloneDeep } from 'lodash-es'
import { formatBytes } from '@/utils'
import { message } from 'ant-design-vue'
import { ReloadOutlined } from '@ant-design/icons-vue'
import { WorkloadRecordDetail, WorkloadRecord } from '@/types/deployUpgrade'
import api from '@/api'

const { podList } = api

const emit = defineEmits(['register'])

const drawerInfo = reactive<{
  record: Partial<WorkloadRecord>
  dataList: WorkloadRecordDetail[]
  search: string
}>({
  record: {},
  dataList: [],
  search: ''
})

const drawerReset = () => {
  drawerInfo.record = {}
  drawerInfo.search = ''
  setTableData([])
}

const [registerTable, { reload, setTableData, setProps }] = useTable({
  api: podList,
  columns: getDetailBasicColumns(),
  afterFetch: afterDataFetch,
  immediate: false, //初始化不请求数据
  pagination: false,
  fetchSetting: {
    listField: 'list'
  }
})

// 表格返回数据处理
function afterDataFetch(data: WorkloadRecordDetail[]) {
  drawerInfo.dataList = data
  return data
}
const onSearch = () => {
  if (drawerInfo.search) {
    let dataList = drawerInfo.dataList.filter(
      (item: WorkloadRecordDetail) => item.name && item.name.indexOf(drawerInfo.search) > -1
    )
    setTableData(dataList)
  } else {
    setTableData(cloneDeep(drawerInfo.dataList))
  }
}
const [detailRegister, { closeDrawer }] = useDrawerInner(async (data) => {
  drawerInfo.record = cloneDeep(data.record)
  setProps({
    searchInfo: {
      namespace: drawerInfo.record.namespace,
      name: drawerInfo.record.name
    }
  })
  reload()
})
</script>

<style lang="less" scoped>
.box-drawer {
  position: relative;
  padding: 30px 24px;
  .drawer-header {
    .header-detail {
      display: flex;
      font-size: 12px;
      margin-bottom: 30px;
      .detail-item {
        display: flex;
        .item-name {
          width: 120px;
          color: #979ca7;
        }
        .item-value {
          width: 400px;
        }
      }
    }
  }
  .search-input {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
